<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例练习</title>
	</head>
	<body>
		<div id="app">

			<div align="center">
				<h3>用户新增</h3>
				姓名: <input type="text"  v-model="addUser.name" />
				年龄: <input type="text" v-model="addUser.age" />
				性别: <input type="text" v-model="addUser.sex" />
				<button @click="addUserBtn">新增</button>
			</div>
			<hr />


			<div align="center">
				
				<h3>用户修改</h3>
				<p>
					编号: <input type="text" disabled v-model="showUser.id"/>
					姓名: <input type="text" v-model="showUser.name"/>
				</p>
				<p>
					年龄: <input type="text" v-model="showUser.age"/>
					性别: <input type="text" v-model="showUser.sex"/>
				</p>
				<button @click="updateUserBtn">修改</button>
			</div>
			<hr />

			<div>
				<table border="1px" align="center" width="50%">
					<tr>
						<th colspan="5">
							<h1>用户信息</h1>
						</th>
					</tr>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					<tr align="center" v-for="user in userList">
						<td><p v-text="user.id"></p></td>
						<td><p v-text="user.name"></p></td>
						<td><p v-text="user.age"></p></td>
						<td><p v-text="user.sex"></p></td>
						<td>
							<button @click="showUserBtn(user)">修改</button>
							<button @click="deletUserBtn(user)">删除</button>
						</td>
					</tr>
				</table>
			</div>


		</div>

		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL="http://localhost:8090/vue"
			let app = new Vue({
				el:"#app",
				data:{
					userList:[],
					addUser:{
						name:'',
						age:'',
						sex:''
					},
					showUser:{
						id:'',
						name:'',
						age:'',
						sex:''
					}
					
				},
				methods:{
					getUserList(){
						axios.get("/findAll").then(promise=>{
							this.userList=promise.data
						})
					},
					
					addUserBtn(){
						axios.post("/saveUser",this.addUser).then(promise=>{
							let msg = promise.data
							alert(msg)
							this.getUserList()
							this.addUser={}							
						})
					},
					deletUserBtn(user){
						axios.delete(`/deletUser/${user.id}`).then(promise=>{
							alert(promise.data)
							this.getUserList()
						})
					},
					showUserBtn(user){
						this.showUser=user
					},
					/* updateUserBtn(){
						axios.put("/updateUser",this.showUser).then(promise=>{
							alert(promise.data)
							this.getUserList()
							this.showUser={}
						})
					} */
					async updateUserBtn(){
						let {data:result} = await axios.put("/updateUser",this.showUser)
						alert(result)
						this.getUserList()
						this.showUser={}
					}
				},
				created() {
					alert("生命周期函数")
					this.getUserList()
				}
				
			})
		</script>
	</body>
</html>
